AWS Amplify Gen 2 で認証関連メールを Amazon SES 経由での送信に変更する

AWS Amplify Gen 2 で認証関連メールを Amazon SES 経由での送信に変更する

Clock Icon2024.09.28

いわさです。

AWS Amplify では Amplify UI の Authenticator コンポーネントを使うことで認証機能を簡単に組み込むことが出来ます。

https://ui.docs.amplify.aws/react/connected-components/authenticator

Amazon Cognito UserPool が使用されるのですが、例えばサインアップ用の認証コードを発行する場合など、ユーザーにメールが送信される場合があります。

27949FA4-FF7C-4288-825D-311148765F86.png

この時、デフォルトでは[email protected]が送信元となります。

A38EFCB5-8D17-4AFC-95BD-F394AC536B27.png

この送信元は Cognito ユーザープールデフォルトの E メール送信機能を使った場合のメールアドレスとなります。
Amplify に関係なく、Cognito ユーザープールのメッセージングタブの次の箇所から設定内容の確認が可能です。

408079B3-8A26-4D59-8701-614141B2C8CE_4_5005_c.jpeg

開発中はこちらでも問題ない場合がありますが、実はこのデフォルト送信機能は運用環境での利用は想定されておらず、1 日に最大 50 通までしか送信出来ないという制限があります。

AB14F4AA-2520-4674-8A30-71A5261C5C52_4_5005_c.jpeg

ということで、運用環境を考えバックエンドに Amplify Gen 2 に Cognto ユーザープールの E メール送信設定を変更してみます。

認証バックエンドの emailConfiguration を設定する

詳しい手順は以下でも紹介されています。が、コードが不足している部分があり本記事ではそのあたりを少し追記しています。

https://docs.amplify.aws/react/build-a-backend/auth/moving-to-production/

前提として Amazon SES の ID を用意しておきます。このあたりの手順は Amplify 上では行わないので割愛します。

9526A973-4210-4A3E-9B96-4AB77F4E7951.png

なお、Amazon SES を運用環境で使用する場合はサンドボックス解除済みである必要もあるのでご注意ください。解除がまだの場合は以下などを参考に解除申請しましょう。

https://dev.classmethod.jp/articles/amazon-ses-production-access-request/

バックエンドリソース定義側で認証スタックに対してそのまま設定してやります。

amplify/backend.ts
import { defineBackend } from '@aws-amplify/backend';
import { auth } from './auth/resource';
import { Stack } from 'aws-cdk-lib/core';
import { EmailIdentity } from 'aws-cdk-lib/aws-ses';

const backend = defineBackend({
  auth
});

const { cfnUserPool } = backend.auth.resources.cfnResources
const authStack = Stack.of(cfnUserPool);
const email = EmailIdentity.fromEmailIdentityName(
  authStack,
  'EmailIdentity',
  'mail1.tak1wa.com'
)

cfnUserPool.emailConfiguration = {
  emailSendingAccount: "DEVELOPER", //COGNITO_DEFAULT | DEVELOPER
  sourceArn: email.emailIdentityArn,
  from: "[email protected]",
  replyToEmailAddress: "[email protected]",
  configurationSet: "hoge-config"
}

ユーザープールのemailConfiguration.emailSendingAccountDEVELOPERを指定することで独自 ID を設定出来ます。COGNITO_DEFAULTを設定した場合は省略時と同じです。

そのままですが、fromは FROM ヘッダ、replyToEmailAddressは REPLY-TO ヘッダに設定されるメールアドレスです。
configurationSetは任意なのですが、昨今の Amazon SES の機能を見る限りだととりあえず設定しておいたほうが吉です。後からトレースする時とか、あるいはちょっと高度な機能を活用する際に構成セット使いたい時が出てきます。

上記バックエンド定義をデプロイしました。Cognito ユーザープールのメッセージングタブを確認してみましょう。

89FAE049-697C-44DA-9400-D21C20E689E4.png

Amazon SES 経由での送信に切り替わっていますね。
実際に Web アプリケーションでもサインアップしてみます。

次のようなメールが届きました。期待どおり反映されていますね。

161CD628-E481-4932-90B8-BAF819756ED3.png

さいごに

本日は AWS Amplify Gen 2 で認証関連メールの送信元メールアドレスなどをカスタマイズしてみました。

Cognito デフォルトメール機能で制限に引っかかるケースはたまにありますので、SES への切り替えとサンドボックス解除を忘れずにしておきましょう。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.